<template>
  <div>
    <div class="chooseAddressContainer">
      <div class="chooseAddressContent">
        <ul class="chooseAddressList">
          <li class="choooseAddress">
            <div class="userNameContent">
              <span class="userName">吴先生</span>
            </div>
            <div class="userInfoContent">
              <span class="userPhone">186****0640</span>
              <span class="takeTime">周一至周日均可收货</span>
            </div>
            <div class="userAddressContent">
              <i class="icon-address-location"></i>
              <span class="userAddress"
                >北京市.北京市.昌平区.回龙观地区 龙跃苑东二区18号4单号402</span
              >
            </div>
            <span class="defaultAddress">默认地址</span>
          </li>
          <li class="addAddress">
            <div class="container">
              <a href="javascript:;">
                <h2 class="iconPlus">+</h2>
                <h3 class="title">添加地址</h3>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddOrChooseAddress",
};
</script>

<style lang="less" scoped>
.chooseAddressContainer {
  width: 100%;
  height: 200px;
  padding-top: 30px;
}
.chooseAddressContent {
  padding-left: 15px;
  height: 100%;
}
.chooseAddressContent ul {
  height: 100%;
}

.chooseAddressContent ul li {
  height: 150px;
  width: 300px;
  margin-right: 15px;
  margin-bottom: 20px;
  border: 1px solid black;
  float: left;
}
.choooseAddress {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}
//地址内容
.userNameContent {
  padding-right: 140px;
  padding-top: 12px;
  padding-bottom: 11px;
  border-bottom: 1px dashed #ecceec;
  height: 21px;
}
&.userName {
  font-size: 16px;
  height: 100%;
  line-height: 21px;
}
.userInfoContent {
  padding: 10px 0 0 0;
  height: 21px;
}
&.userPhone {
  float: left;
  line-height: 21px;
  font-size: 14px;
}
&.takeTime {
  float: right;
  line-height: 21px;
  font-size: 14px;
}
.userAddressContent {
  padding: 9px 0 6px 20px;
  height: 40px;
}
&.userAddress {
  font-size: 14px;
}
.defaultAddress {
  position: absolute;
  top: 15px;
  right: 20px;
}
.addAddress {
  width: 100%;
  height: 100%;
}
.addAddress .container {
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 30px;
}
.container a{
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.container .iconPlus {
  font-size: 40px;
  color: gray;
}
.container .title {
  font-size: 14px;
  color: gray;
  font-weight: 400;
}
</style>
